import {
  Box,
  Center,
  Flex,
  Icon,
  Image,
  Text,
  Tooltip,
} from '@chakra-ui/react';
import { MdCheckCircle } from 'react-icons/md';

// import { changeUrl } from '../ParametersModal';

export interface LoraItemProps {
  label?: string;
  imgUrl?: string;
  value: string;
  onClick: (v: string) => void;
  isSelected?: boolean;
  group?: string;
  id?: string;
  modelDesc?: string;
  tooltip?: string;
  [key: string]: any;
}
export default function TFLoaItem(p: LoraItemProps) {
  const { isSelected, onClick, label, imgDtoList, value, disabled } = p;
  const IMAGE_SRC =
    Array.isArray(imgDtoList) && imgDtoList[0] ? imgDtoList[0].imgPath : null;
  return (
    <Flex flexDirection="column" gap="1">
      <Tooltip label={disabled ? '当前风格模型与基础模型不匹配' : ''}>
        <Box
          w="8rem"
          rounded="md"
          h="8rem"
          onClick={() => !disabled && onClick(value)}
          border="3px solid"
          borderColor={isSelected ? 'base.50' : 'base.850'}
          _light={{
            borderColor: isSelected ? 'accent.700' : 'base.850',
          }}
          bg="base.900"
          cursor={disabled ? 'not-allowed' : 'pointer'}
          textAlign="center"
          position="relative"
        >
          <Center top={1} right={1} position="absolute">
            {isSelected && (
              <Icon
                borderRadius="full"
                color="base.50"
                _light={{
                  color: 'accent.700',
                }}
                as={MdCheckCircle}
                fontSize="1.5rem"
              />
            )}
          </Center>
          {IMAGE_SRC && (
            <Image
              maxH="100%"
              w="100%"
              objectFit="cover"
              borderRadius="base"
              src={IMAGE_SRC}
              loading="lazy"
            />
          )}
        </Box>
      </Tooltip>
      <Text
        textAlign="center"
        fontWeight={isSelected ? 600 : 400}
        color={isSelected ? 'accent.500' : 'base.300'}
      >
        {label}
      </Text>
    </Flex>
  );
}
